<template>
  <div>
  <el-form :inline="true" ref="generalForm" model="generalForm">
    <el-form-item>
      <span class="text-blue far fa-user" style="color: blue;"></span>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
      <el-input v-model="generalForm.name" ></el-input>
    </el-form-item>
  </el-form>
  <el-form :inline="true" ref="generalForm" model="generalForm">
    <el-form-item>
      <span class="text-blue  fas fa-building" style="color: blue;"></span>
    </el-form-item>
    <el-form-item label="公司" prop="company.name">
      <el-input v-model="generalForm.company.name" :disabled="true" ></el-input>
    </el-form-item>
  </el-form>
  <el-form :inline="true" ref="generalForm" model="generalForm">
    <el-form-item>
      <span class="text-blue fas fa-sitemap" style="color: blue;"></span>
    </el-form-item>
    <el-form-item label="部门" prop="office.name">
      <el-input v-model="generalForm.office.name" :disabled="true"></el-input>
    </el-form-item>
  </el-form>
  <el-form :inline="true" ref="generalForm" model="generalForm">
    <el-form-item>
      <span class="text-blue  fas fa-envelope" style="color: blue;"></span>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="concatForm.email" ></el-input>
    </el-form-item>
  </el-form>
  <el-form :inline="true" ref="generalForm" model="generalForm">
    <el-form-item>
      <span class="text-blue fas el-icon-phone" style="color: blue;"></span>
    </el-form-item>
    <el-form-item label="手机" prop="mobile">
      <el-input v-model="concatForm.mobile"></el-input>
    </el-form-item>
  </el-form>
  <el-form :inline="true" ref="generalForm" model="generalForm">
    <el-form-item>
      <span class="text-blue  fas el-icon-phone-outline" style="color: blue;"></span>
    </el-form-item>
    <el-form-item label="电话" prop="phone">
      <el-input v-model="concatForm.phone" ></el-input>
    </el-form-item>
  </el-form>
  <el-form :inline="true" ref="generalForm" model="generalForm">
    <el-form-item>
      <el-button type="primary" @click="submitConcatForm()">保存</el-button>
      <el-button type="primary" @click="changeshow()">修改密码</el-button>
      <el-button type="primary" @click="logoutHandle()">退出</el-button>
    </el-form-item>
  </el-form>
  <el-form :inline="true" ref="generalForm" model="generalForm" v-if=isshow>
    <el-form-item>
      <span class="text-blue far el-icon-time" style="color: blue;"></span>
    </el-form-item>
    <el-form-item label="旧密码" :rules="[ { required: true, message: '必填项不能为空', trigger: 'blur' }]" prop="oldPassword">
      <el-input v-model="pwdForm.oldPassword" ></el-input>
    </el-form-item>
  </el-form>
  <el-form :inline="true" ref="generalForm" model="generalForm" v-if=isshow>
    <el-form-item>
      <span class="text-blue far el-icon-view" style="color: blue;"></span>
    </el-form-item>
    <el-form-item label="新密码" :rules="[ { required: true, message: '必填项不能为空', trigger: 'blur' }]" prop="newPassword">
      <el-input v-model="pwdForm.newPassword" ></el-input>
    </el-form-item>
  </el-form>
  <el-form :inline="true" ref="generalForm" model="generalForm" v-if=isshow>
    <el-form-item>
      <span class="text-blue far el-icon-refresh-right" style="color: blue;"></span>
    </el-form-item>
    <el-form-item label="确认密码" :rules="[ { required: true, message: '必填项不能为空', trigger: 'blur' }]" prop="confirmNewPassword">
      <el-input v-model="pwdForm.confirmNewPassword" ></el-input>
    </el-form-item>
  </el-form>
  <el-form :inline="true" ref="generalForm" model="generalForm"  v-if=isshow>
    <el-form-item>
      <el-button type="primary" @click.native="submitConcatForm()">保存</el-button>
    </el-form-item>
  </el-form>
</div>
</template>

<script>
  import Bottom from './bottom'
  export default {
    data () {
      var validatePass2 = (rule, value, callback) => {
        if (value !== this.pwdForm.newPassword) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        id: '',
        type: '1',
        user: null,
        generalForm: {
          name: '',
          sign: '',
          company: {
            name: ''
          },
          office: {
            name: ''
          },
          remarks: ''
        },
        concatForm: {
          email: '',
          phone: '',
          mobile: ''
        },
        pwdForm: {
          oldPassword: '',
          newPassword: '',
          confirmNewPassword: ''
        },
        photo: '',
        dataList: [],
        pageNo: 1,
        pageSize: 10,
        total: 0,
        isshow: false, //是否显示修改密码
        loading: false,
        rule: [{ required: true, message: '必填项不能为空', trigger: 'blur' }, {validator: validatePass2, trigger: 'blur'}]
      }
    },
    components: {
      Bottom
    },
    watch: {
      '$store.state.user.id': {
        handler (userId) {
          if (userId) {
            this.$http.get(`/sys/user/queryById?id=${userId}`).then(({data}) => {
              this.recover(this.generalForm, data.user)
              this.recover(this.concatForm, data.user)
              this.photo = data.user.photo
            })
            this.refreshList()
          }
        },

        immediate: true,
        deep: false
      }
    },
    methods: {
      logoutHandle () {
          this.$router.replace("/login")
      },
      changeshow () {
          this.isshow = !this.isshow
          console.log(this.isshow)
      },
      submitGeneralForm () {
        this.$refs['generalForm'].validate((valid) => {
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            this.$http({
              url: `/sys/user/saveInfo`,
              method: 'post',
              headers: {arrayFormat: 'repeat'},
              data: this.generalForm
            }).then(({data}) => {
              loading.close()
              if (data && data.success) {
                this.$store.commit('user/updateName', this.generalForm.name)
                this.$message.success(data.msg)
              }
            })
          }
        })
      },
      submitConcatForm () {
        this.$refs['concatForm'].validate((valid) => {
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            this.$http({
              url: `/sys/user/saveInfo`,
              method: 'post',
              headers: {arrayFormat: 'repeat'},
              data: this.concatForm
            }).then(({data}) => {
              if (data && data.success) {
                this.$message.success(data.msg)
              }
              loading.close()
            })
          }
        })
      },
      submitPwdForm () {
        this.$refs['pwdForm'].validate((valid) => {
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            this.$http({
              url: `/sys/user/savePwd`,
              method: 'post',
              headers: {arrayFormat: 'repeat'},
              data: this.pwdForm
            }).then(({data}) => {
              if (data && data.success) {
                this.$message.success(data.msg)
              }
              loading.close()
            })
          }
        })
      },
 // 获取数据列表
      refreshList () {
        this.loading = true
        this.$http({
          url: `/sys/log/data/mine?type=${this.type}`,
          method: 'get',
          params: {
            'pageNo': this.pageNo,
            'pageSize': this.pageSize,
            ...this.searchForm
          }
        }).then(({data}) => {
          if (data && data.success) {
            this.dataList = data.page.list
            this.total = data.page.count
            this.loading = false
          }
        })
      },
      changeLog (index) {
        this.type = index
        this.refreshList()
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageNo = 1
        this.refreshList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageNo = val
        this.refreshList()
      },
      handleAvatarSuccess (res, file) {
        this.photo = res.path
        this.$message.success(res.msg)
        this.$store.commit('user/updatePhoto', res.path)
      },

      beforeAvatarUpload (file) {
        const isJPG = file.type.indexOf('image/') >= 0
        const isLt2M = file.size / 1024 / 1024 < 5

        if (!isJPG) {
          this.$message.error('上传头像只能是图片格式!')
          return false
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
          return false
        }
        return true
      }
    }
  }
</script>
